<!--登录页面-->
<template>
	<view class="wrap">
		<view class="top"></view>
		<view class="logo"><image src="../../static/img/logo.png"></image></view>
		<view class="content">
			<view class="title">欢迎使用智慧消防</view>
			<u-form-item prop="tel" style="height: 43px;">
				<input type="number" v-model="tel" placeholder="请输入手机号" ></input>
				<u-button slot="right" class="getCaptcha" :style="[inputStyle]" size="mini" @tap="submit">获取验证码</u-button>
			</u-form-item>
			<u-form-item prop="code"  style="height: 43px;">
				<input v-model="code" :maxlength="maxlength" placeholder="请输验证码" ></input>
			</u-form-item>
			<u-button class="loginBtn" @tap="login">登录</u-button>
			<view class="alternative">
				<text class="password"  @click="toUrl('password')">密码登录</text>
				<text class="register"  @click="toUrl('register')">账号注册</text>
			</view>
		</view>
		<view class="buttom">
			<view class="hint">
				登录代表同意
				<text class="link">智慧消防用户协议、隐私政策，</text>
			</view>
		</view>
		<u-toast :type="type" ref="uToast"></u-toast>
	</view>
</template>

<script>
	import utils from "../../utils/utils.js"
	import store from '@/store/index'
	export default {
		data() {
			return {
				tel:'',
				maxlength: 6,
				type: 'warning',
				code: ''
			}
		},
		computed:{
			inputStyle() {
				let style = {};
				if(this.tel && this.tel.length ==11) {
					style.color = "#000000";
				}
				return style;
			}
		},
		onLoad() {
		
		},
		methods: {
			submit(){
				if(!this.tel){
					this.$refs.uToast.show({
						title: "手机号不能为空",
						position: "center",
						type: "error",
						icon: false,
						url: "",
					});
					return;
				}
				//发送验证码
				//发送验证码信息
				utils.request("/api/admin/aliService/sendSms",{mobile:this.tel,type:0},"post","app").then(res=>{
					utils.setCacheData("code",res.data)
					store.dispatch("user/setTel",this.tel)
				})
			},
			login() {
				// userLoginByCode
				utils.request("/api/admin/auth/userLoginByCode",{mobile:this.tel,code:this.code},"post","app").then(res=>{
					// console.log(res)
					store.dispatch("user/setTokenInfo").then(res=>{
						this.utils.request("/api/app/user/getUserInfo", {}, "get", "app", true).then(res => {
							if(res.data.roleCode == "XZ-ADMIN" || res.data.roleCode == "XZ-YH"){
								//消灾企业用户
								uni.redirectTo({
									url:"/pages/index/index_xz"
								})
							} else if(res.data.roleCode == "WB-ADMIN" || res.data.roleCode == "WB-YH"){
								//维保企业用户
								uni.redirectTo({
									url:"/pages/index/index_wb"
								})
							}else if(res.data.roleCode == "JC-ADMIN" || res.data.roleCode == "JC-YH"){
								//维保企业用户
								uni.redirectTo({
									url:"/pages/index/index_jc"
								})
							}else{
								//其他企业用户
								uni.redirectTo({
									url:"/pages/index/index_qt"
								})
							}
						}).catch(error => {
							console.log(error)
						})
					})
				}).catch(error=>{
					console.log(error)
					this.$refs.uToast.show({
						title: error.data || error.msg,
						position: "center",
						type: "error",
						icon: false,
						url: "",
					});
				})
			},
			register(){
				uni.navigateTo({
					url:"/pages/login/register"
				})
			},
			toUrl(val){
				uni.navigateTo({
					url:"/pages/login/"+val
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@font-face{
		font-family: MFLangQian_Noncommercial-Regular;
		src: url(../../static/css/造字工房朗倩常规体.OTF)
	}
.wrap {
	background-color: #FFFFFF;
	height: 100vh;
	font-size: 28rpx;
	.logo{
		background-image: url(../../static/img/banner-login.png);
		background-size: cover;
		height: 200px;
		text-align: center;
		uni-image{
			margin-top: 156px;
		}
		image{
			width: 88px;
			height: 88px;
		}
	}
	.content {
		width: 279px;
		margin: 0 auto 0;
		padding-top: 50px;
		.loginBtn{
			background-image: url(../../static/img/juxing.png);
			width: 279px;
			height: 44px;
			font-size: 16px;
			color: #FFFFFF;
			margin-top: 12.4%;
		}
		.title {
			font-family: MFLangQian_Noncommercial-Regular;
			font-size: 24px;
			color: #3186FF;
			letter-spacing: 0.39px;
			text-align: center;
			font-weight: 500;
			margin-bottom: 100rpx;
		}
		.input-placeholder {
			font-size: 12px;
			color: #CCCCCC;
		}
		.tips {
			color: $u-type-info;
			margin-bottom: 60rpx;
			margin-top: 8rpx;
		}
		.getCaptcha {
			color: $u-tips-color;
		}
		.alternative {
			font-size: 12px;
			color: #333333;
			display: flex;
			justify-content: space-between;
			margin-top: 30rpx;
			padding: 0 24px 0 24px;
			
		}
	}
	.buttom {
		.loginType {
			display: flex;
			padding: 350rpx 150rpx 150rpx 150rpx;
			justify-content:space-between;
			
			.item {
				display: flex;
				flex-direction: column;
				align-items: center;
				color: $u-content-color;
				font-size: 28rpx;
			}
		}
		
		.hint {
			position: fixed;
			right: 0px;
			left: 0px;
			bottom: 2.3%;
			padding: 20rpx 40rpx;
			font-size: 20rpx;
			text-align: center;
			color: $u-tips-color;
			
			.link {
				color: $u-type-warning;
			}
		}
	}
}
</style>